<template>
  <div>
    <el-dialog title="分类详情" :visible.sync="showDialog_" custom-class='dialog_right dialogScroll_detail MkSiteDetail' top="0%" @close='closeDialog("addForm")' @open='openDialog'>
      <div class="operationBtnInRightDialog">
          <span class='infoIcon'  @click="editCategory"><i class="el-icon-edit"></i> 编辑</span>
          <span class='infoIcon' @click="deleteCategory" ><i class="el-icon-delete"></i> 删除</span>
      </div>
      <el-scrollbar :wrapStyle="[{maxHeight:(bodyHeight-110)+'px'}]">
        <div class="contentDiv">
          <el-row :gutter="20">
            <el-col :span="4" class="textAlignRight fontColorThree">名称</el-col>
            <el-col :span="20" class="fontColorTwo"> {{currentObj.name}}</el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="4" class="textAlignRight fontColorThree">上级分类</el-col>
            <el-col :span="20" class="fontColorTwo"> {{currentObj.parentName}}</el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="4" class="textAlignRight fontColorThree">是否显示</el-col>
            <el-col :span="20" class="fontColorTwo">  {{currentObj.status == 'ENABLE'?'是' : '否'}}</el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="4" class="textAlignRight fontColorThree">排序</el-col>
            <el-col :span="20" class="fontColorTwo"> {{currentObj.weight}}</el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="4" class="textAlignRight fontColorThree">链接</el-col>
            <el-col :span="20" class="fontColorTwo"> <a :href="'http://'+currentObj.link" style="text-decoration: none;color:#1c2b36;" target="_blank">{{currentObj.link}}</a></el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="4" class="textAlignRight fontColorThree">功能图标</el-col>
            <el-col :span="20" class="fontColorTwo">
              <div class="showImage" @click="viewImage(currentObj.image.accessUrl)" v-if="currentObj.image">
                <img :src="currentObj.image.accessUrl" alt=""/>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20" style="margin-top:10px;">
            <el-col :span="4" class="textAlignRight fontColorThree">首页图标</el-col>
            <el-col :span="20" class="fontColorTwo">
              <div class="showImage" @click="viewImage(currentObj.homeImage.accessUrl)" v-if="currentObj.homeImage">
                <img :src="currentObj.homeImage.accessUrl" alt=""/>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-scrollbar>
    </el-dialog>

    <!--预览图片-->
    <el-dialog :visible.sync="imageDialogVisible" size="large" custom-class="show-image-dialog" top="0%">
      <img :src="imageViewUrl" alt=""/>
    </el-dialog>

    <!--编辑-->
    <mk-add-home-page :showDialog='dialogVisible_edit'  v-on:closeDialog='closeDialog_edit' :currentObj="currentObj"></mk-add-home-page>
  </div>
</template>

<script>
  import homePageService from '../../../services/homePage'
  import MkAddHomePage from "./MkAddHomePage";
  import {mapState} from 'vuex'
export default {
  name: 'MkSiteDetail',
  components: {
    MkAddHomePage
  },
  props: ['showDialog','currentObj'],
  computed: mapState({
    bodyHeight: state => state.global.bodyHeight,
  }),
  methods: {
    editCategory() {
      if(this.currentObj.parentId === 0) {
        this.$message.warning(this.currentObj.name+'不允许被编辑');
        return;
      }
      this.dialogVisible_edit = true;
    },
    deleteCategory() {
      if(this.currentObj.parentId === 0) {
        this.$message.warning(this.currentObj.name+'不允许被删除');
        return;
      }
      if(this.currentObj.appCategoryStatus === 'Native') {
        this.$message.warning('该分类为系统默认，不允许被删除');
        return;
      }
      this.$confirm('您确定要删除该分类?','删除分类',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        closeOnClickModal: false,
        closeOnPressEscape:false,
        customClass: 'confirmBox_warning'
      }).then(()=>{
        homePageService.deleteHomePageServer({id:this.currentObj.id},data=>{
            this.$message.success('删除成功');
            this.showDialog_ = false;
            this.isRefresh = 'yes';
        })
      }).catch(()=>{

      })
    },
    closeDialog_edit(type) {
        this.isRefresh = type;
        this.dialogVisible_edit = false;
        this.showDialog_ = false;
    },
    viewImage(src) {
        this.imageViewUrl = src;
        this.imageDialogVisible = true;
    },
    closeDialog() {
      this.$emit('closeDialog',this.isRefresh);
    },
    openDialog() {
      this.isRefresh = 'no';
    },
  },
  watch: {
    showDialog: function(value) {
      this.showDialog_ = value;
    },
    screenHeight (val) {
      this.scrollContainerHeight = val - 110;
    },
  },
  data () {
    return {
      screenHeight: 0,
      scrollContainerHeight: 0,
      dialogVisible_edit: false,
      imageDialogVisible: false,
      imageViewUrl:'',
      isRefresh: 'no',
      showDialog_: this.showDialog,
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less'>
 @import '../../../assets/style/main.less';
  .MkSiteDetail{
    .showImage{
      .showImageInFixedContainer(120px,120px);
      cursor:pointer;
    }

  .el-row{
   line-height: 35px;
    .el-col{
      word-break: break-all;
      a:hover{
        .my-opacity(0.8)
      }
    }
  }

  }
</style>
